<template>
  <div>
    <!-- 顶部seatch -->
    <div class="navtop">
      <span class="span" @click="city">{{ shanghai }} </span>
      <span class="zufang zufang-shaixuan-xiajiantou"></span>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <span class="zufang zufang-ditudingwei dingwei" @click="cimap"></span>
    </div>
    <!-- 顶部轮播图部分 -->
    <div class="navswipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(itms, index) in stipeImg" :key="index"
          ><img :src="`http://liufusong.top:8080${itms.imgSrc}`" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 中间导航 -->
    <div class="mainnav">
      <van-row>
        <van-col span="6">
          <span class="zufang zufang-fangzi"></span>
          <span class="span">整租</span>
        </van-col>
        <van-col span="6">
          <span class="zufang zufang-pengyou"></span>
          <span class="span">合租</span>
        </van-col>
        <van-col span="6">
          <span class="zufang zufang-ditudingwei"></span>
          <span class="span">地图找房</span>
        </van-col>
        <van-col span="6" @click="$router.push('/add')">
          <span class="zufang zufang-fangzi"></span>
          <span class="span">去出租</span>
        </van-col>
      </van-row>
    </div>
    <!-- 下部导航卡片 -->
    <div class="footer">
      <van-row>
        <van-col span="12"><h6>租房小组</h6></van-col>
        <van-col span="12"
          ><span class="topspan" style="position: relative; right: -151px"
            >更多</span
          ></van-col
        >
      </van-row>
      <van-row>
        <van-col span="10" offset="1" v-for="itms in infoacty" :key="itms.id">
          <img :src="`http://liufusong.top:8080${itms.imgSrc}`" alt="" />
          <div
            style="
              display: flex;
              flex-direction: column;
              margin-top: 6px;
              font-size: 24px;
              margin-left: 5px;
            "
          >
            <span class="span" style="float: right">{{ itms.desc }}</span>
            <span style="margin-top: 5px" class="span">{{ itms.title }}</span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { swiperApi, homeInfoApi } from '@/api'
export default {
  computed: {
    //路由跳转过来进行传值
    shanghai() {
      if (this.$route.query.label) {
        return this.$route.query.label
      } else {
        return '上海'
      }
    },
    //路由携带城市id
    remen() {
      if (this.$route.query.value) {
        return this.$route.query.value
      } else {
        return 'AREA|dbf46d32-7e76-1196'
      }
    }
  },
  data() {
    return {
      value: '',
      stipeImg: [],
      valus: 'AREA|dbf46d32-7e76-1196',
      infoacty: []
    }
  },
  async created() {
    const { data } = await swiperApi()
    this.stipeImg = data.body
    const {
      data: { body }
    } = await homeInfoApi(this.remen)
    this.infoacty = body
  },
  methods: {
    city() {
      this.$router.push({
        path: '/city',
        query: {
          id: 1
        }
      })
    },
    cimap() {
      this.$router.push({ path: '/map' })
    }
  }
}
</script>

<style scoped lang="less">
:deep(.navtop) {
  position: fixed;
  display: flex;
  width: 75%;
  height: 75px;
  margin-top: 50px;
  margin-left: 10%;
  align-items: center;
  z-index: 100000;
  background-color: #fff;
  border-radius: 15px;
  .dingwei {
    position: absolute;
    right: -60px;
    font-size: 50px;
    color: #fff;
  }
  .van-search {
    margin-left: 30px;
  }
  .van-cell {
    padding: unset;
    align-items: center;
  }
  .van-search {
    padding: unset;
  }
  .van-search__content {
    background-color: #fff;
    height: 75px;
    padding: unset;
  }
  span {
    font-size: 30px;
  }
  .span {
    font-size: 28px;
    margin-left: 10px;
  }
}
:deep(.navswipe) {
  height: 400px;

  .van-swipe {
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
:deep(.mainnav) {
  margin-top: 30px;
  .zufang {
    display: inline-block;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #f2fbf7;
    font-size: 60px;
    color: #20b879;
  }
  .span {
    font-size: 28px;
    padding-top: 20px;
  }
  .van-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
:deep(.footer) {
  margin-top: 26px;
  height: 440px;
  width: 100%;
  background-color: #f6f5f6;
  .van-col--offset-1 {
    border-radius: 10px;
  }
  h6 {
    margin: 10px 0 0 20px;
    padding: 0;
    line-height: 56px;
  }
  .topspan {
    margin: 10px 20px 0 0;
    line-height: 50px;
    font-size: 23px;
    align-items: center;
    float: right;
  }
  .van-col {
    margin-bottom: 40px;
    background-color: #fff;
    height: 105px;
    display: flex;
  }
  img {
    margin-left: 10px;
    margin-top: 14px;
    height: 78px;
  }
  .span {
    font-size: 25px;
  }
}
</style>
